<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现可调侧栏</title>
    <style>
        body {
            display: flex;
            margin: 0;
            min-height: 100vh;
            user-select: none;
            -webkit-user-select: none;
        }

        .scalable {
            position: relative;
            background-color: #eeeeee;
            min-width: 100px;
        }

        .main {
            background: white;
            flex: 1;
        }

        .content {
            padding: 20px;
        }

        .scalable .separator {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 0;
            right: 0;
            width: 14px;
            height: 100%;
            background: white;
            box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.35);
            cursor: col-resize;
        }

        .scalable .separator i {
            display: inline-block;
            height: 14px;
            width: 1px;
            background: #e9e9e9;
            margin: 0 1px;
        }

        .scalable .content {
            padding-right: 34px;
        }

        .scalable .content img {
            display: block;
            max-width: 100%;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="scalable">
        <div class="content">
            <img src="img/img6.jpg" alt="">
        </div>
        <div class="separator">
            <i></i><i></i>
        </div>
    </div>
    <div class="main">
        <div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
    </div>

    <script>
        var startX, stratWidth;
        // 下次打开的时候，可以保存上次的结果
        stratWidth = localStorage.getItem('scalableWidth') || getScalableWidth();
        document.querySelector('.scalable').style.width = stratWidth + 'px';

        document.querySelector('.separator').addEventListener('mousedown', startDrag);

        function startDrag(e) {
            startX = e.clientX;
            stratWidth = getScalableWidth();
            document.documentElement.addEventListener('mousemove', onDrag); //鼠标移动到任何位置，都能监听到
            document.documentElement.addEventListener('mouseup', stopDrag);
        }

        function onDrag(e) {
            let newWidth = stratWidth + e.clientX - startX;
            document.querySelector('.scalable').style.width = newWidth + 'px';
        }

        function stopDrag(e) {
            localStorage.setItem('scalableWidth', getScalableWidth());
            // 取消绑定事件
            document.documentElement.removeEventListener('mousemove', onDrag);
            document.documentElement.removeEventListener('mouseup', stopDrag);
        }

        function getScalableWidth() { //将宽度转换为10进制整数
            var width = document.querySelector('.scalable').offsetWidth;
            console.log(width);
            // return parseInt(window.getComputedStyle(document.querySelector('.scalable')).width, 10);
            return width;
        }
    </script>
</body>

</html>